<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				background: #333333;
			}
			#box{
				background: #ccc;
			}
		</style>
		<script>
			window.onload = function(){
				var oBox = document.querySelector("#box");
				var oBg = oBox.getContext('2d');
				oBg.fillRect(0,0,100,100);
				var oImg = oBg.getImageData(0,0,100,100);
				//alert(getXY(oImg,3,5));
				
				
				for( var i = 0; i<oImg.width;i++ ){
					setXY(oImg,i,5,[255,0,0,255]);
				};
				oBg.putImageData(oImg,100,100);
				function getXY(obj,x,y){
					var w = obj.width;
					var h = obj.height;
					var d = obj.data;
					var color = [];
					color[0] = d[4*(y*w+x)]
					color[1] = d[4*(y*w+x)+1]
					color[2] = d[4*(y*w+x)+2]
					color[3] = d[4*(y*w+x)+3]
					return color;
				};
				function setXY(obj,x,y,color){
					var w = obj.width;
					var h = obj.height;
					var d = obj.data;
					
					d[4*(y*w+x)] = color[0];
					d[4*(y*w+x)+1] = color[1]
					d[4*(y*w+x)+2] = color[2]
					d[4*(y*w+x)+3] = color[3]
					
				}
			}
		</script>
	</head>
	<body>
		<canvas id="box" width="500" height="500"></canvas>
	</body>
</html>
